/*
 * 发型试戴素材列表
 * @Author: ljb
 * @Date: 2018-05-17 17:07:17
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-26 18:00:45
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

</style>
<template>
	<div class="v-admin-hair-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="hairs"
			height="580"
			class="personal-scrollbar"
			border/>

	</div>
</template>

<script>

import Button from 'iview/src/components/button';

export default {
	name: 'HairIndex',
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		hairs: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('hair.dir'),
					key: 'assets_dir',
					align: 'center',
					render: (h, { row }) => <div> { row.assets_dir || '-' } </div>,
				},
				{
					title: this.$t('hair.asset_title'),
					key: 'asset_title',
					align: 'center',
					render: (h, { row }) => <div> { row.asset_title || '-' } </div>,
				},
				{
					title: this.$t('hair.gender'),
					key: 'gender',
					align: 'center',
					render: (h, { row }) => <div> { this.showGender(row.gender) || '-' } </div>,
				},
				{
					title: this.$t('hair.thumb'),
					key: 'hair_preview',
					align: 'center',
					render: (h, { row }) => <div>
						{
							row.hair_preview
								? <img src={ row.hair_preview } alt={this.$t('common.none')} width="50%"/>
								: this.$t('common.none')
						}
					</div>,
				},
				{
					title: this.$t('hair.assets_png'),
					key: 'assets_png',
					align: 'center',
					render: (h, { row }) => <div>
						{
							row.assets_png
								? <img src={ row.assets_png } alt={this.$t('common.none')} width="50%"/>
								: this.$t('common.none')
						}
					</div>,
				},
				{
					title: this.$t('hair.assets_bin_uri'),
					key: 'assets_bin',
					align: 'center',
					render: (h, { row }) => <div> { row.assets_bin || '-' } </div>,
				},
				{
					title: this.$t('hair.sort'),
					key: 'sort',
					align: 'center',
					render: (h, { row }) => <div> { String(row.sort) || '-' } </div>,
				},
				{
					title: this.$t('common.created_at'),
					key: 'created_at',
					width: 200,
					align: 'center',
					render: (h, { row }) => <div> { !row.created_at ? '-' : row.created_at } </div>,
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 200,
					render: (h, { row }) => (
						<div>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">
								{ this.$t('common.edit') }
							</Button>
							<Button size="small" on-click={() => { this.$emit('delete', row.id); }} type="error">
								{ this.$t('common.delete') }
							</Button>
						</div>),
				},
			],
		};
	},
	methods: {

		/**
         * 显示性别
         * @param  {type} gender {description}
         * @return {type} {description}
         */
		showGender(gender) {
			switch (Number(gender)) {
			case 1:

				return this.$t('hair.male');

			case 2:

				return this.$t('hair.female');

			default:

				return this.$t('hair.other');
			}
		},

	},
};
</script>
